<script setup lang="ts">
import { AlignmentListType } from '@/interfaces';

const props = withDefaults(
  defineProps<{
    alignmentList: AlignmentListType[];
  }>(),
  {
    alignmentList: () => [] as AlignmentListType[],
  }
);
</script>

<template>
  <div class="alignmentItem flex items-center mb-5" v-for="(item, index) in props.alignmentList" :key="index">
    <span class="font-bold">{{ index + 1 }}</span>
    <el-avatar class="ml-5 mr-5" :size="40" :src="item.src" />
    <el-progress type="line" :text-inside="true" :stroke-width="20" :percentage="item.per" />
  </div>
</template>

<style scoped lang="scss">
.alignmentItem {
  :deep(.el-progress-bar__outer) {
    @apply w-40;
    border-radius: 0 !important;
  }

  :deep(.el-progress-bar__inner) {
    border-radius: 0 !important;
  }
}
</style>
